<template>
  <div class="layout">
    <div class="box" v-for="(item, index) in 7" :key="index">{{ item }}</div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
.layout {
  display: grid;
  gap: 0.2667rem;
  height: 50rem;
  grid-template-columns: repeat(4, 1fr);
  // grid-template-rows: 1fr;
  background: #fff;
  .box {
    background: #aef160;
    aspect-ratio: 9/16;
    font-size: 60px;
    text-align: center;
  }
  :nth-child(2) {
    grid-column: 2/4;
    grid-row: 1/4;
  }
}
</style>
